<template>
    <div class="content">
        <div class="main">
            <div class="main-box">
                <img src="../assets/picture/info-title.png" alt="" class="img">
                <div class="sstj">实时统计</div>
                <div class="clbox">
                    <img src="../assets/picture/info-text.png" class="clsl">
                    <img src="../assets/picture/info-img-1.png" class="cl" alt="">
                    <div class="cltext">车辆总数(辆)</div>
                    <div class="clnum">12.457</div>
                    <img src="../assets/picture/info-text.png" class="clsl zx">
                    <img src="../assets/picture/info-img-2.png" class="zximg" alt="">
                    <div class="zxtext">当前在线数(辆)</div>
                    <div class="zxnum">12.457</div>
                    <img src="../assets/picture/info-text.png" class="clsl hy">
                    <img src="../assets/picture/info-img-3.png" class="hyimg" alt="">
                    <div class="hytext">今日活跃数(辆)</div>
                    <div class="hynum">12.457</div>
                    <img src="../assets/picture/info-text.png" class="clsl hyd">
                    <img src="../assets/picture/info-img-4.png" class="hydimg" alt="">
                    <div class="hydtext">今日活跃率(%)</div>
                    <div class="hydnum">83</div>
                </div>
            </div>
        </div>


    </div>
</template>
<script>
export default {
    name: 'sstj',
    props: {
        option: {
            type: Object
        },
        width: String,
        height: String,
    },
    

}
</script>
<style scoped >
.content {
    position: relative;
    box-sizing: border-box;
}

.img {
    position: absolute;
    width: 34%;
    height: 14%;
    top: -19px;
    left: 102px;
    z-index: 2;
}
.sstj{
    position: absolute;
    top: -23px;
    left: 121px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    line-height: 43px;
    z-index: 5;
}
.clbox {
    position: relative;
    top: 0px;
    left: 0px;
}

.zxbox {
    position: relative;
}

.clsl {
    position: absolute;
    top: 27px;
    left: 51px;
    width: 191px;
    height: 43px;
}

.zx {
    top: 78px;
}

.hy {
    top: 130px;
}

.hyd {
    top: 182px;
}

.cl {
    position: absolute;
    top: 27px;
    left: 69px;
    width: 32px;
}

.zximg {
    position: absolute;
    top: 82px;
    left: 69px;
    width: 32px;
}

.hyimg {
    position: absolute;
    top: 133px;
    left: 69px;
    width: 32px;
}

.hydimg {
    position: absolute;
    top: 183px;
    left: 69px;
    width: 32px;
}

.cltext {
    position: absolute;
    top: 36px;
    color: #ffffff;
    font-size: 5px;
    left: 131px;
}

.clnum {
    position: absolute;
    top: 49px;
    font-weight: 600;
    font-size: 17px;
    color: #ffff44;
    left: 141px;
}

.zxtext {
    position: absolute;
    top: 84px;
    color: #ffffff;
    font-size: 5px;
    left: 131px;
}

.zxnum {
    position: absolute;
    top: 99px;
    font-weight: 600;
    font-size: 17px;
   color: rgb(37, 243, 230);		
    left: 141px;
}

.hytext {
   position: absolute;
    top: 137px;
    color: #ffffff;
    font-size: 5px;
    left: 131px;
}

.hynum {
  position: absolute;
    top: 152px;
    font-weight: 600;
    font-size: 17px;
   color: rgb(248, 74, 74);	
    left: 141px;
}

.hydtext {
    position: absolute;
    top: 189px;
    color: #ffffff;
    font-size: 5px;
    left: 131px;
}

.hydnum {
    position: absolute;
    top: 202px;
    font-weight: 600;
    font-size: 17px;
    color: rgb(245, 200, 71);
    left: 141px;
}
.main-box {
    position: absolute;
    height: 236px;

    background-image:
        url("../assets/picture/bj-1.png"),
        url("../assets/picture/bj-2.png"),
        url("../assets/picture/bj-4.png"),
        url("../assets/picture/bj-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: 0px;
}

.main {
    height: 234px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(32, 85, 139);

}

.chart {
    width: 100px;
    height: 100px;
    border-top: 1px solid rgb(209, 206, 206);
}
</style>